<template>
    <div id="reg">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <h3 class="login_title">注册账号</h3>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" placeholder="请输入用户名" prefix-icon="el-icon-user-solid"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"
                    prefix-icon="el-icon-lock"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="请再次输入密码"
                    prefix-icon="el-icon-lock"></el-input>
            </el-form-item>

            <el-form-item class="button">
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>

            <a href="javascript:" @click="toLogin()" class="home-button">去登录</a><a href="javascript:"
                class="home-button" @click="toHome()">回到主页</a>

        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            ruleForm: {
                username: '',
                password: '',
                checkPass: ''
            },
            rules: {
                password: [
                    { validator: validatePass, trigger: 'blur' }
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ],
                username: [
                    { required: true, message: "请输入用户名！", trigger: "blur" },
                    { min: 2, max: 10, message: "长度为2-10个字符", trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        toLogin() {
            this.$router.replace('/Login')
        },
        toHome() {
            this.$router.replace('/')
        },
        //表单验证，验证成功后使用axios 发送post请求至后端
        submitForm(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.$axios
                        .post('/reg', this.ruleForm,)
                        .then(resp => {
                            //成功传值后使用消息提示传递后端提示。
                            this.$message({
                                type: 'success',
                                message: resp.data
                            })
                            //控制台输出后端返回信息
                            console.log("成功传值")
                        })

                }
                //未通过验证时，消息提示请正确输入！，控制台输出，，，返回false 不执行操作。
                else {
                    this.$message({
                        message: "请正确输入！",
                        type: "warning"
                    })
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style>
#reg {
    background-image: url("http://47.93.99.8:81/img/back.jpg");
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
}

body {
    margin: 0px;
}

.demo-ruleForm {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 250px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}

.login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}

.button {
    position: relative;
    left: -40px;
}
</style>